<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>塞纳皇宫-网站后台管理系统</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="icon" href="/static/admin/img/logo.png" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico"> <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="/static/admin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/static/admin/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="/static/admin/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">

    <link href="/static/admin/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="/static/admin/css/upload.css" rel="stylesheet">

    <script src="/static/admin/js/city/jquery-1.11.3.min.js"></script>

    <script src="/static/admin/editor/ueditor.config.js"></script>
    <script src="/static/admin/editor/ueditor.all.js"></script>

    <style>

        .uploadbtn,.uploadbtn2{position: absolute;padding: 5px 10px;background: #23b7e5;border-radius: 5px;color: #ffffff;z-index: 4}
        .uploadbtn,.uploadbtn:hover{background: #19a9d5;cursor: pointer;}
        .form-control{cursor: pointer;}
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">


                <div class="tabs-left">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-8" id="add-works">添加/编辑</a>
                        </li>
                        <!--<li class=""><a data-toggle="tab" id="duotu-upload"  href="#tab-9">多图上传</a>-->
                        </li>
                    </ul>
                </div>

            </div>

    </div>

    <div class="ibox-content" id="tab-8">
        <form class="form-horizontal m-t" id="works-form" action="" method="post" onsubmit="return subForm()"  enctype="multipart/form-data" >
            <input name="id" id="id" value="{if isset($data)}{$data.id}{/if}" type="hidden">
            <div class="form-group">
                <label class="col-sm-1 control-label">标题：</label>
                <div class="col-sm-3">
                    <input id="title" name="title"  class="form-control" type="text" required=""  value="{if isset($data)}{$data.title}{/if}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">所属栏目：</label>
                <div class="col-sm-2">
                    <select style="height:32px;" class="form-control m-b" id="class_id" name="class_id" onChange="bannerChange()">
                        {if isset($data) && $data.class_id !==''}
                            <option value="{$data.class_id}">{$data.name}</option>
                            {volist name="data.info" id="v"}
                            <option value="{$v.class_id}">{$v.name}</option>
                            {/volist}
                        {else}
                            <option>请选择栏目</option>
                            {volist name="info" id="v"}
                             <option value="{$v.class_id}">{$v.name}</option>
                            {/volist}
                        {/if}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">视频封面：</label>
                <div class="col-sm-2">
                    <input id="video_img"  class="form-control" type="file" name="video_img" onchange="uploadImg(this,'imgupload')" style="padding: 0;position: absolute; opacity: 0;z-index: 3 ;cursor: pointer;width:20px;">
                    <p class="uploadbtn" >点击上传图片</p>
                    <span  style="margin-left: 120px; margin-top: 5px; width: 200px;" class="help-block m-b-none"> </span>
                    <input type="hidden" name="video_img" value="{if isset($data)}{$data.video_img}{/if}" >
                    {if isset($data) && $data.video_img !==''}
                    <img id ="imgupload"  class='willshow' src="{if isset($data)}{$data.video_img}{/if}" style=" display:block;max-height: 200px;margin-top: 32px"/>
                    {else}
                    <img id ="imgupload"  class='willshow' src="" style=" display:none;max-height: 200px;margin-top: 32px"/>
                    {/if}
                </div>

            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">视频上传：</label>
                <div class="col-sm-2" style="position: relative">
                    <input id="video_url"  class="form-control" type="file" name="video_url" onchange="uploadVideo(this,'imgupload2')" style="padding: 0;position: absolute; opacity: 0;z-index: 3 ;cursor: pointer;width:20px;">
                    <p class="uploadbtn2" >点击上传视频</p>
                    <input type="hidden" name="video_url" value="{if isset($data)}{$data.video_url}{/if}" >
                    {if isset($data.video_url) && $data.video_url !==' '}
                    <div id="del-div" onclick="delVideo({if isset($data)}{$data.id}{/if})" style="position: absolute;top: 4px;right: 19px;z-index: 10;width: 20px;height: 20px;border-radius: 50%;background-color:#23b7e5;color:white">
                        <i class="fa fa-times" style="position: absolute;top: 3px;right:-12.5px;z-index: 10;width: 28px;height: 28px;border-radius: 50%;"></i>
                    </div>

                    <video   controls id ="imgupload2"  width="32" height="24"  src="{if isset($data)}{$data.video_url}{/if}"></video>
                    {else}

                    <video  style="display：none"     id ="imgupload2" width="32" height="24"  src=""></video>
                    {/if}
                    <div id="jiazai" style=" display: none; width: 100%; height: 100%; z-index: 99999;position: absolute;top:0;left: 0;background-color:rgba(0,0,0,0.5);">
                        <div class="sk-spinner sk-spinner-wave" style=" z-index: 99999;position: absolute;top: 45%;left: 45%">
                                <div class="sk-rect1"></div>
                                <div class="sk-rect2"></div>
                                <div class="sk-rect3"></div>
                                <div class="sk-rect4"></div>
                                <div class="sk-rect5"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">视频地址：</label>
                <div class="col-sm-3">
                    <input id="out_link" name="out_link"  class="form-control" type="text" value="{if isset($data)}{$data.out_link}{/if}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">显示状态：</label>
                <div style="margin-left: 20px;" class="radio radio-info radio-inline">
                    <input type="radio" id="inlineRadio1" value="1" name="is_show" checked="" {if isset($data) && $data.is_show ==1 }checked{/if}>
                    <label for="inlineRadio1"> 显示</label>
                </div>
                <div style="margin-left: 35px;" class="radio radio-inline radio-danger">
                    <input type="radio" id="inlineRadio2" value="0" name="is_show" {if isset($data) && $data.is_show ==0 }checked{/if}>
                    <label for="inlineRadio2"> 不显示</label>
                </div>
            </div>



            <div class="form-group">
                <label class="col-sm-1 control-label">SEO标题：</label>
                <div class="col-sm-3">
                    <input id="titlseo_titlee" name="seo_title"  class="form-control" type="text"  value="{if isset($data)}{$data.seo_title}{/if}">
                    <!--  <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请输入公司名称</span>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">SEO关键词：</label>
                <div class="col-sm-3">
                    <input id="seo_keywords" name="seo_keywords"  class="form-control" type="text"   value="{if isset($data)}{$data.seo_keywords}{/if}">
                    <!--  <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请输入公司名称</span>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">SEO描述：</label>
                <div class="col-sm-3">
                    <textarea style="height: 100px;" id="seo_description"  class="form-control"  aria-required="true" name="seo_description">{if isset($data)}{$data.seo_description}{/if}</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">排序：</label>
                <div class="col-sm-1">
                    <input id="sort"  class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid"  name="sort" value="{if isset($data)}{$data.sort}{/if}">
                    <!-- <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入公司账号</span>-->
                </div>

                <label class="col-sm-1 control-label">点击：</label>
                <div class="col-sm-1">
                    <input id="click"  class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid"  name="click" value="{if isset($data)}{$data.click}{/if}">
                </div>


            </div>

            <div class="form-group" style="display: none" id="Works_Upload">

            </div>

            <div class="form-group">
                <div class="col-sm-8 col-sm-offset-3">
                    <button class="btn btn-primary" type="submit" >提交</button>
                </div>
            </div>

        </form>
    </div>



<script src="/static/admin/js/jquery.min.js"></script>

<script src="/static/admin/js/jquery-1.7.2.min.js"></script>
<script src="/static/admin/layer/layer.js"></script>


<!-- 自定义js -->

<script src="/static/admin/js/plugins/datapicker/bootstrap-datepicker.js"></script>

<script src="/static/admin/laydate/laydate.js"></script>
<!--script src="/static/admin/layer/layer.css"></script>-->



<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/static/admin/js/plugins/summernote/summernote.js"></script>
<script src="/static/admin/js/plugins/summernote/summernote-zh-CN.js"></script>

<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="/static/admin/js/T_upload.js"></script>

<script  type="text/javascript">
    $(function(){
        $('.uploadbtn').click(function(){
            return $('#video_img').click();
        })

        $('.uploadbtn2').click(function(){
            return $('#video_url').click();
        })
    })


    function subForm(){

        var formobj = document.getElementById('works-form')
        var formData = new FormData(formobj);
        var video_img = $("#video_img").val();
        var video_url = $("#video_url").val();
        var class_id = $("#class_id").val();
        var out_link = $("#out_link").val();
        var id =$("#id").val();
        if(id =='' && video_img ==''){
            layer.msg('请选择视频封面');
            return false;
        }
        if(id =='' && class_id ==''){
            layer.msg('请选择视频栏目');
            return false;
        }
        if(id =='' && video_url ==''){
            layer.msg('请选择上传视频');
            return false;
        }
        if(out_link !==''){
            var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
            if(!reg.test(out_link)){
                layer.msg('请输入正确的外部链接');
                return false;
            }
        }
        $("#jiazai").css('display','block');
        $.ajax({
            url:"/admin.php/video/add_vcr",
            data:formData,
            type:"post",
            dataType:'json',
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success:function(res){
                if(1==res.code) {
                    layer.msg(res.msg);
                    setTimeout(function(){
                        window.location.href="/admin.php/video/vcr";
                    },1000)
                }else{
                    layer.msg(res.msg);
                    return false;
                }
            },
            error:function(){
                layer.msg('系统错误');
                return false;
            },

        });
        return false;
    }



    $(function() {
        $.Tupload.init({
            url: "/admin.php/style/addworksajax",
            title	  : "图片大小不能超过500kb,为使避免图片上传出现问题，请尽量选择完毕图片后再上传",
            fileNum: 200, // 上传文件数量
            divId: "T_upload", // div  id
            accept: "image/jpeg,image/x-png", // 上传文件的类型
            fileSize  :51200000,     // 上传文件的大小
            onSuccess: function(data, i) {
                var temp =eval('(' + data.currentTarget.response + ')');
                if(temp.fileName != undefined){
                    $("#img_src"+i).attr('value',temp.fileName);
                    $("#img_src"+i).attr('name',"upload_img");
                    var str = '<input type="hidden" name="works_pic[]" value="'+temp.info+'" class="works_pic">';
                    $("#Works_Upload").append(str);
                    $("#img_src"+i).parent(".uploading-imgBg").siblings("#uploading-tip"+i).children('.onDelPic').attr('idstr',temp.info);
                }
            },
            onDelete: function(i) {
            }
        });
    })

    $(".onDelPic").live('click',function(){
        var id = $(this).attr('idstr');
        var photo_id = '';
        $("#T_upload .photo_id").each(function(){
            photo_id = $(this).val();
            if(photo_id == id){
                $(this).remove();
            }
        })
        $.ajax({
            url:"/admin.php/dynamic/delworksajax",
            type:"post",//get
            data:{id:id},
            dataType:"json",
            success:function(data){
            },
        });
        $.Tupload.onDelete($(this).attr("data"));
    });

    function uploadImg(file, showImg) {
        if (!file.files[0]) {
            return false;
        }
        if (!file.value.match(/.jpg|.gif|.png|.jpeg/i)) {
            layer.msg('您选择的图片格式不正确，请重新选择');
            return false;
        }
        if (file.files[0].size > 1 * 1024 * 1024) {
            layer.msg('您选择的图片不能大于1M，请重新选择！');
            return false;
        }
        var myPhoto = document.getElementById(showImg);
        var reader = new FileReader();
        reader.onload = function (e) {
            var dataURL = e.target.result;
            myPhoto.src = dataURL;
            myPhoto.style.display = 'block';
        };
        reader.readAsDataURL(file.files[0]);
    }


    function uploadVideo(file, showImg) {
        if (!file.files[0]) {
            return false;
        }
        if (!file.value.match(/.mp4|.avi|.dat|.mkv/i)) {
            layer.msg('您选择的视频格式不正确，请重新选择');
            return false;
        }
        if (file.files[0].size > 100 * 1024 * 1024) {
            layer.msg('您选择的视频不能大于100M，请重新选择！');
            return false;
        }
        var myPhoto = document.getElementById(showImg);
        var reader = new FileReader();
        reader.onload = function (e) {
            var dataURL = e.target.result;
            myPhoto.src = dataURL;
            myPhoto.style.display = 'block';
        };


        reader.readAsDataURL(file.files[0]);
    }

    function delVideo(id){
        layer.confirm('确定删除该视频吗？',function(){
            $.post("/admin.php/videi/delvideo",{"id":id},function(res){
                if(1 == res.code){
                    layer.msg(res.msg);

                    document.getElementById("imgupload2").src=" ";
                    $("#del-div").css('display','none');
                }

            });
        })
    }
    </script>


</body>


</html>
